<template>
    <div id="cesium-container">
    </div>
</template>
  
<script>
export default {
    name: 'ThreeDModelColoring',
    components: {},
    mounted() {
        this.initViewer()
        this.addModel('/model/glb/Cesium_Air.glb', 4000)
    },
    methods: {
        initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("cesium-container", {
                terrainProvider: new window.Cesium.CesiumTerrainProvider({
                    url: 'http://data.mars3d.cn/terrain',
                    requestWaterMask: true,
                    requestVertexNormals: true
                }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: false,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });
        },
        addModel(url, height) {
            window.viewer.entities.removeAll();
            const position = window.Cesium.Cartesian3.fromDegrees(
                120.059,
                36.328,
                height
            );
            const heading = window.Cesium.Math.toRadians(135);
            const pitch = 0;
            const roll = 0;
            const hpr = new window.Cesium.HeadingPitchRoll(heading, pitch, roll);
            const orientation = window.Cesium.Transforms.headingPitchRollQuaternion(
                position,
                hpr
            );
            const entity = window.viewer.entities.add({
                name: url,
                position: position,
                orientation: orientation,
                model: {
                    uri: url,
                    minimumPixelSize: 128,
                    maximumScale: 20000,
                    color:window.Cesium.Color.fromCssColorString('#FF6C37').withAlpha(1),
                    colorBlendMode:window.Cesium.ColorBlendMode.REPLACE,//HIGHLIGHT、MIX、REPLACE
                    colorBlendAmount:0.8,
                    silhouetteColor:window.Cesium.Color.fromCssColorString('#FF0000').withAlpha(1),
                    silhouetteSize:10
                },
            });
            window.viewer.trackedEntity = entity;
        }
    }
}
</script>
  
<style>
#cesium-container {
    width: 100%;
    height: 100%;
}
</style>
  